
<template>
    <div class="com-statusColum">

        <div class="user-block" @mouseleave="isShowUserPanel = false">
            <div class="iconfont icon-xiangmuchengyuan xiangmuchengyuan" :class="{ 'btn-hover': isShowUserPanel }"
                @mouseenter="isShowUserPanel = true"></div>
            <div class="username" :class="{ 'btn-hover': isShowUserPanel }" @mouseenter="isShowUserPanel = true">超级管理员
            </div>
            <div class="user-ctrl" v-if="isShowUserPanel"></div>
        </div>
        <div class="iconfont lang" @click="changeLang"
            :class="systemLang === 'en' ? 'icon-yuyanzhongwen' : 'icon-yuyanyingwen'"></div>
        <div class="iconfont theme" @click="changeTheme"
            :class="appStyle === 'dark' ? 'icon-taiyang-copy' : 'icon-yuliang'"></div>
    </div>
</template>
<script lang='ts'>
import { homeStore } from "@/store"
import { computed, defineComponent, ref } from "vue"
import { i18n } from '@/lang'
import { confirmTheme } from "@/theme"
export default defineComponent({
    name: "StatusColum",
    setup() {
        // 当前系统语言
        const systemLang = computed({
            get() {
                return homeStore().systemLang
            },
            set(val: 'en' | 'zh_cn') {
                homeStore().systemLang = val
            }
        })
        // 切换语言
        const changeLang = () => {
            systemLang.value = systemLang.value === 'en' ? 'zh_cn' : 'en'
            i18n.global.locale = systemLang.value
        }
        // 当前主题
        const appStyle = computed({
            get() {
                return homeStore().appStyle
            },
            set(val: 'light' | 'dark') {
                homeStore().appStyle = val
            }
        })
        // 切换主题
        const changeTheme = () => {
            appStyle.value = appStyle.value === 'light' ? 'dark' : 'light'
            confirmTheme(appStyle.value) // 默认使用深色主题
        }

        const isShowUserPanel = ref(false)
        return {
            isShowUserPanel,
            changeTheme,
            changeLang,
            systemLang,
            appStyle
        }
    },
})
</script>
<style lang="less" scoped>
.com-statusColum {
    height: 71px;
    width: calc(100% - 60px);
    background: @statusColumBg;
    display: flex;
    align-items: center;
    padding: 0 30px;

    .user-block {
        margin-left: auto;
        margin-right: 20px;
        display: flex;
        position: relative;
        align-items: center;

        .btn-hover {
            color: @mainFontHoverColor;
        }

        .xiangmuchengyuan {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            font-size: 42px;
            transition: 0.1s all;
            display: flex;
            justify-content: center;
            align-items: center;
            background: @statusColumBg;
            position: relative;
            z-index: 3;
            cursor: pointer;
        }

        .user-ctrl {
            position: absolute;
            z-index: 1;
            width: calc(100% + 30px);
            height: 100px;
            border-radius: 8px;
            background: @mainColor;
            top: 20px;
            left: -15px;
            transition: all 0.2s;
            cursor: pointer;
        }

        .username {
            max-width: 120px;
            margin-left: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            position: relative;
            z-index: 3;
            cursor: pointer;
        }

    }



    .lang {
        width: 45px;
        cursor: pointer;
        font-size: 32px;

        &:hover {
            color: @mainFontHoverColor;
        }
    }

    .theme {
        .lang();
        font-size: 28px;
        font-weight: bold;
    }
}
</style>
